<template>
	<div class="BlueLineBox">
		<div
				class="datalist"
				v-for="(item, index) in data"
				:key="'list' + index"
			>
				<div class="continer" @click="goDetail(item)">
					<div class="title">
						<span>{{ item.title }}</span>
					</div>
					<div class="tag">
						<div>能源化工</div>
						<div>能源化工</div>
					</div>
					<p class="content">{{ item.content }}</p>
          
					<div class="time">
						<span>{{ item.time }}</span>
						<span>来源：{{ item.laiyuan }}</span>
					</div>
				</div>
			</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const props = defineProps({
  data: []
})
const emit = defineEmits(['click'])

function goDetail(item:any) {
  emit('click',item)
}
</script>

<style scoped lang="less">
.BlueLineBox {
	
}


.datalist {
	padding: 8px 0;
	// margin-left: 75px;
	// border-left: 1px dashed @color-1356FF;
	position: relative;
	.continer {
		background: #fafafb;
		border-radius: 16px;
		padding: 24px;
		// height: 200px;
		margin-left: 5px;
		font-size: 14px;
	}
}
.time {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
  font-size: 12px;
		color: @color-8F919C;
}
.title {
	display: flex;
	align-items: center;
	margin-bottom: 16px;
	> span {
		font-weight: 600;
		font-size: 16px;
		color: #0f142c;
	}
}
.tag {
	display: flex;
	gap: 15px;
	margin-bottom: 20px;
	> div {
		font-size: 12px;
		width: auto;
		padding: 2px 8px;
		color: #f4711d;
		background-color: #fff2e9;
		border: 1px solid #ffe3cf;
		border-radius: 4px;
	}
}
.content {
	font-size: 14px;
	color: @color-636976;
  margin-bottom: 25px;
}
</style>
